<template>
  <div class="child">
    <p>{{ content }}</p>
    <button @click="changeContent">Change Content</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 子组件内容
const content = ref('Initial Content')

// 点击按钮时改变内容
const changeContent = () => {
  content.value = 'Updated Content'
}
</script>

<style scoped>
.child {
  margin: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 4px;
}
button {
  margin-top: 10px;
}
</style>
